import React from 'react';
import { connect } from '@/dva';
import EditContent from './edit';
import { Table, Button } from 'antd';
import { stateMap } from '@/utils/map';
import { ConnectProps } from '@/dva/types';
import { stateBadge } from '@/utils/render';
import { PlusOutlined } from '@ant-design/icons';
import { FormItem } from '@/components/FormPro/types';
import { ModalPro, PageCard, SearchPro } from '@/components';
import { State as ClassifyState } from '@/models/imageClassify/types';

interface State {
  item: any;
  editShow: boolean;
}

type Props = ConnectProps & {
  imageClassify: ClassifyState;
}

/*
* form表单
* */
const formList: FormItem[] = [
  {
    name: 'name',
    label: '分类名',
    type: 'input'
  },
  {
    name: 'state',
    label: '状态',
    type: 'select',
    width: 160,
    group: stateMap
  }
];

@connect({
  imageClassify: state => state.imageClassify
})
class Classify extends React.PureComponent<Props, State> {
  static defaultProps = {
    imageClassify: {}
  }

  state: State = {
    item: null,
    editShow: false
  }

  private formData: any = {};

  get imageClassify() {
    return this.props?.imageClassify || {};
  }

  componentDidMount() {
    this.onRefresh();
  }

  columns: any[] = [
    {
      width: '25%',
      title: '分类名',
      dataIndex: 'name',
    },
    {
      width: '25%',
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      width: '25%',
      title: '状态',
      dataIndex: 'state',
      render: stateBadge
    },
    {
      width: '25%',
      title: '操作',
      render: (record: any) => {
        return (
          <ModalPro
            okText="保存"
            width="480px"
            title="编辑分类"
            cancelText="取消"
            children={<a children="编辑"/>}
            triggerContent={<EditContent item={record}/>}
          />
        )
      }
    },
  ];

  /*请求数据*/
  private fetchList = (query: any = {}) => (
    this.props?.commit?.('imageClassify/queryList', query)
  )

  /*搜索逻辑*/
  private onSearch = (query?: any) => {
    this.formData = query;
    this.fetchList(query);
  }

  /*初始化获取数据*/
  private onRefresh = () => this.fetchList();

  /*页码改变获取数据*/
  private onTableChange = (pagination: any) => {
    const { current, pageSize } = pagination;
    this.fetchList({ page: current, limit: pageSize, ...this.formData });
  }

  render() {
    const {
      loading,
      pagination,
      list: dataSource = []
    } = this.imageClassify;

    const {
      total,
      page: current,
      limit: pageSize
    } = pagination;

    const header = (
      <SearchPro
        formList={formList}
        onSearch={this.onSearch}
      >
        <ModalPro
          okText="新建"
          cancelText="取消"
          width="480px"
          title="新建分类"
          triggerContent={(
            <EditContent
              onSuccess={this.onRefresh}
            />
          )}
        >
          <Button
            type="primary"
            children="新建"
            icon={<PlusOutlined/>}
          />
        </ModalPro>
      </SearchPro>
    );

    return (
      <PageCard header={header}>
        <Table
          bordered={true}
          loading={loading}
          columns={this.columns}
          dataSource={dataSource}
          rowKey={(row) => row._id}
          onChange={this.onTableChange}
          pagination={{ total, current, pageSize }}
        />
      </PageCard>
    )
  }
}

export default Classify;
